﻿@{
    ViewBag.Title = "Index";
}


<img src="/assets/img/bg/00.jpg" class="img-responsive bgImage" alt="Responsive image" />

<div class="container bs-docs-container">
    <div class="closer pull-right">
        <div class="lrborder">
            <div class="bborder">
                <i class="hover icon-chevron-up"></i>
            </div>
        </div>
    </div>

    <div class="nav">
        <div class="about">
            <i class="icon-desktop"></i>
            Tool
        </div>
        <div class="nav-search">
            <input type="text" class="NV_Input_Search" placeholder="搜尋" style="width: 160px;">
            <div class="NV_Icon_Input_Search icon-search" style="left: 377px; display: none;"></div>
            <div class="NV_Icon_Switch_Search">
                <div class="NV_Icon_Preview googleplay" data-name="Google Play" data-format="https://play.google.com/store/search?q={0}"></div>
                <div class="NV_Icon_Preview_Suffix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="nav-oprate">
            <div class="icon-th-large" data-menu="switch" title="多個桌面"></div>
            <div class="msg" data-menu="msg" title="新訊息"></div>
            <div class="call" data-menu="call" title="撥出"></div>
            <div class="placard" data-menu="placard" title="通知">
                <div class="placard-count"></div>
            </div>
            <div class="usercenter logined" data-menu="usercenter" title="設定" style="display: block;"></div>
            <div class="language" data-menu="language" title="語言" style="display: none;"></div>
            <div class="splite" style="display: block;"></div>
            <div class="icon-logout" title="登出"></div>
        </div>
    </div>
    <div class="NV_Search_Menu is-hide" style="display: none;"><a data-menu="googleplay" class="NV_Search_Menu_Item" format="https://play.google.com/store/search?q={0}">
        <div class="NV_Search_Menu_Icon googleplay"></div>
        Google Play</a><a data-menu="quixey" class="NV_Search_Menu_Item" data-format="https://www.quixey.com/search?q={0}"><div class="NV_Search_Menu_Icon quixey"></div>
            Quixey</a></div>
    <div class="uc-dropdown hide">
        <div class="arrow"></div>
        <ul>
            <li class="user_name">
                <div class="user-icon"></div>
                <span class="text">設定</span></li>
            <li class="device"><span class="text">M032</span><span class="status online"></span></li>
            <li class="language">
                <div class="language-icon"></div>
                <span class="text">語言</span></li>
            <li class="notification NF_open">
                <div class="notification-icon"></div>
                <span class="text">開啟桌面通知</span></li>
        </ul>
    </div>
    <div id="appDesktop">

    </div>
    <!-- http://w.qq.com -->
</div>

@section Styles {
    <link rel="stylesheet" type="text/css" href="/assets/css/tool.css" />
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }

        /* closer */
        .closer {
            height: 19px;
            width: 71px;
            padding-left: 10px;
            overflow: hidden;
        }
        .lrborder {
            position: relative;
            top: -25px;
            border: 1px solid #333333;
            height: 50px;
            width: 50px;

     -moz-transform: rotate(45deg);  /* FF3.5+ */
       -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(45deg);  /* IE9 */
          transform: rotate(45deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;

               background-color: #F5F5F5;
        }
        .bborder {
            margin-top: 12px;
            margin-left: 12px;
            width: 30px;
            height: 30px;
            border-bottom: 1px solid #333333;
            padding: 10px 0 0 8px;

     -moz-transform: rotate(-45deg);  /* FF3.5+ */
       -o-transform: rotate(-45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-45deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-45deg);  /* IE9 */
          transform: rotate(-45deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
        }

        .hover:hover {
            color: #2a6496;
        }

        /* bgImg */
        .background {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
        }
        .bgImage {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            -animation-name: fadeInOut;
            -animation-timing-function: ease-out;
            -animation-duration: 2s;
            -animation-direction: alternate;
        }
    </style>    
}

@section Scripts {
    <script type="text/javascript">
        $(function () {
            $('.closer .icon-chevron-up').click(function () {
                $this = $(this);
                $this.toggleClass('icon-chevron-up')
                    .toggleClass('icon-chevron-down');

                $('.bs-docs-nav').slideToggle({
                    duration: 0,
                    complete: function () {
                        $('body').css('paddingTop', $('.bs-docs-nav').is(':hidden') ? 0 : 50);
                    }
                });
            });
            $('.closer .icon-chevron-up').click();
        });
        
    </script>
}